<div class="row-fluid headline-row">
    <div class="span12 headline-line">
        <div class="headline pull-left">
            <h1>ร้านล่าสุด</h1>
        </div>

        <div class="pull-right go-to-top">
            <i class="w-glyphicon-up-arrow"></i> To Top
        </div>

        <div class="add-shop pull-right">
            <a href="<?php echo base_url() ?>shop/add?category=<?php echo $category ?>">
                <i class="w-glyphicon-circle-plus"></i> Add your Shop
            </a>
        </div>
    </div>
    <div class="clearfix"></div>
</div>

<div class="masonry-container" style="width:100%">
    <?php
    foreach ($shop_list as $shop) {
        $this->load->view('shop_level/level' . $shop['shop_level'], $shop);
    }
    ?>

</div>

<div class="bottom-space"></div>

<div id="shopModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="shopModalLabel"><?php echo isset($shop_fix)?$shop_fix['shop_title']:''?></h3>
    </div>
    <div class="modal-body">
        <div class="pull-left well-small" style="width:420px;height:355px;margin-bottom: 0;overflow-y:auto">
            <p>
                <?php
                if(isset($shop_fix)){
                    $this->load->helper('bbcode');
                    echo nl2br(parse_bbcode($shop_fix['shop_description']));
                }
                ?>
            </p>
        </div>
        <div class="pull-right">
            <div class="well">
                <a href="javascript:void(0)" class="do_vote btn btn-primary btn-block btn-large" data-loading-text='โหวตแล้ว' data-shop-hash="<?php echo isset($shop_fix)? hashids_encrypt($shop_fix['id']):''?>"><i class="icon icon-thumbs-up"></i> โหวตชอบร้านนี้</a>
            </div>
            <div name="fb-like-box" class="fb-like-box" data-href="<?php echo isset($shop_fix)?$shop_fix['shop_facebook']:''?>" data-width="320" data-height="270" data-show-faces="false" data-stream="true" data-header="false"></div>
        </div>
    </div>
    <div class="modal-footer">
        <hr style="margin-top:0;"/>
        <div class="pull-left">
            
            <span class="shortcut shop_link"><?php echo isset($shop_fix['shop_link']) && $shop_fix['shop_link']!=''?'<a href="'.$shop_fix['shop_link'].'"><img src="'.base_url().'img/icons/link.png"/></a>':''?></span>
            <span class="shortcut shop_facebook"><?php echo isset($shop_fix['shop_facebook']) && $shop_fix['shop_facebook']!=''?'<a href="'.$shop_fix['shop_facebook'].'"><img src="'.base_url().'img/icons/facebook.png"/></a>':''?></span>
            <span class="shortcut shop_instagram"><?php echo isset($shop_fix['shop_instagram']) && $shop_fix['shop_instagram']!=''?'<a href="'.$shop_fix['shop_instagram'].'"><img src="'.base_url().'img/icons/instagram.png"/></a>':''?></span>
        </div>
        <a href="<?php echo base_url()?>shop/<?php echo isset($shop_fix)?hashids_encrypt($shop_fix['id']).'/edit':''?>" class="btn btn-primary edit_button"><i class="icon-edit"></i> แก้ไขร้านนี้</a>
        <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> ปิดหน้าต่าง</button>
    </div>
</div>

<script>
    $(function() {
        $('.box .show_shop_modal').click(function(e) {
            e.preventDefault();
            $('.do_vote').button('reset');

            $('#shopModal #shopModalLabel').html($(this).attr('title'));

            /*Manipulate data-shop*/
            var data_shop = $(this).attr('data-shop').split(';');
            /*Do vote Hash*/
            $('.do_vote').attr('data-shop-hash', data_shop[0]);
            /*Edit button*/
            $('.edit_button').attr('href', '<?php echo base_url()?>shop/'+data_shop[0]+'/edit');

            /*Check Link*/
            if (data_shop[1] != '')
            {
                $('#shopModal .shop_link').html('<a href="' + data_shop[1] + '" target="_blank"><img src="<?php echo base_url() ?>img/icons/link.png"/></a>');
            }
            /*Check Facebook*/
            if (data_shop[2] != '')
            {
                $('#shopModal .shop_facebook').html('<a href="' + data_shop[2] + '" target="_blank"><img src="<?php echo base_url() ?>img/icons/facebook.png"/></a>');
                $('.fb-like-box').attr('data-href', data_shop[2]);
                FB.XFBML.parse();
            }
            else
            {
                $('.fb-like-box').hide();
            }
            /*Check Instagram*/
            if (data_shop[3] != '')
            {
                $('#shopModal .shop_instagram').html('<a href="' + data_shop[3] + '" target="_blank"><img src="<?php echo base_url() ?>img/icons/instagram.png"/></a>');
            }

            /*Get Shop Description*/
            $.post('<?php echo base_url() ?>ajax/get_shop_description', {'shop_hash': data_shop[0]}, function(msg) {
                $('#shopModal p').html(msg);
                $('#shopModal').modal({
                    'show': true,
                });
            });

        });
    });

<?php
if (isset($shop_fix)) {
    ?>
       
        $('#shopModal').modal({
            'show': true,
        });
    <?php
}
?>

    $('.do_vote').click(function() {
        $(this).button('loading');

        var shop_hash = $(this).attr('data-shop-hash');
        $.post('<?php echo base_url() ?>ajax/do_vote', {'shop_hash': shop_hash});
    });


    $(function() {
        $('.go-to-top').hide();
        $('.masonry-container').masonry({
            itemSelector: '.box',
            isFitWidth: true,
            columnWidth: 0,
            gutterWidth: 5,
        });
    });


    var current_headline_row = $('.headline-row').offset().top;
    $(document).scroll(function() {
        if ($('body').scrollTop() > current_headline_row)
        {
            $('.go-to-top').show();
            $('.headline-row').css('position', 'absolute');
            $('.headline-row').css('top', $('body').scrollTop() + $(window).height() - $('.headline-row').height());
        }
        else
        {
            $('.go-to-top').hide();
            $('.headline-row').css('position', 'static');
        }
    });
    $('.go-to-top').click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
    });


</script>

